define(function (require, exports, module) {
	/**
	 * @class Combox
	 * @memberof Nuui
	 * @classdesc 利用input创建的下拉框组件<br/>
	 * 		基本元素item:<br/>
	 * 		item内至少有2个属性:key和text,text用于展示,key为真正的值</br>
	 * 		可以设置更多的值,并可以在selectHandler和itemFilter中访问到</br>
	 * 		如</br>
	 * 		item={key:"USD", text:"美元"}</br>
	 * 		item={key:"6225123412341234", text:"6225****1234", name:"我的账户"}</br>
	 * 		Combox文档中提到的item均是这个形式
	 * @param {$} input - input的$形式
	 * @param {object} config - 配置
	 * @param {boolean} config.readOnly - 渲染之后是否readOnly,默认为true<br/>
	 * @param {int} config.maxHeight - 展开之后的最大高度,最好为一个元素高度的整数倍<br/>
	 * @param {int} config.minHeight - 展开之后的最小高度,最好为一个元素的高度<br/>
	 * @param {array} config.data - item数组<br/>
	 * @param {func} config.selectHandler(item) - 选中一个元素后触发的事件<br/>
	 * @param {func} config.itemFilter(item) - 过滤原数据使用的方法,只有返回值为true的item才会展示
	 * @param {view} view - 当前的view,一定要填
	 * @example var accountCombox = new Combox(view.$("#payAccount"), {
	 * 	data:[
	 * 		{key:"6225882121047658", text:"6225****7658(张三)", name:"张三", balance:"1000000"},
	 * 		{key:"6225882121042536", text:"6225****2536(李四)", name:"李四", balance:"2000000"},
	 * 		{key:"6225882121049826", text:"6225****9826(王五)", name:"王五", balance:"3000000"},
	 * 		{key:"6225882121046437", text:"6225****6437(赵茄子)", name:"赵茄子", balance:"4000000"}
	 * 	],
	 * 	itemFilter:function(item){
	 * 		return item.key.endsWith("6");
	 * 	},
	 * 	selectHandler:function(item){
	 * 		view.$("#currentBalance").html(Nuui.utils.toCashWithComma(item.balance));
	 * 	}
	 * }, view);
	 */
	var Combox = module.exports = function(input, config, view){
		this.initailize(input, config, view);
		return this;
	};
	
	Combox.prototype = {
		initailize:function(input, config, view){
			this._config = $.extend({}, this._defaultConfig);
			if(config){
				this._config = $.extend(this._config, config);
			}

			// 由于目前采取单页模式,创建时必须输入view参数
			if(!view){
				alert("combox:请输入view参数");
				return;
			}
			
			this._input = input;
			this._id = input.attr("id");
//				this._input.addClass("comboboxInput");
			this._input.data("combox", this);
			if(this._config.readOnly == true){
				this._input.attr("readOnly", true);
			}

			this._input.bind(this._tap_event, $.proxy(this._onInputTap, this));
			this._input.bind("blur", $.proxy(this._onInputBlur, this));
			this._input.bind("keyup", $.proxy(this._onInputKeyup, this));
//			this._createButton();

//				this._emptyWidth = this._config.width || this._config.minWidth;
//				this._input.css("width", this._emptyWidth + "px");

			// backbone情况下将container放在view中
			this._doc = view ? view.$el : document.body;
			this._container = $("<ul></ul>").appendTo(this._doc).addClass("comboboxContainer");
//			this._testSpan = $("<span></span>").css("font-size", this._config.fontSize).appendTo(this._doc).hide();
			$(this._doc).on(this._tap_event, $.proxy(this._checkOnMouseDown, this));

			this._itemArray = [];
			
			if(this._config.data){
				this.setData(this._config.data);
			}
			if(this._config.defaultKey){
				this.setTextByKey(this._config.defaultKey);
			}
		},
		/**
		 * 默认设置
		 */
		_defaultConfig:{
			readOnly:false,
			maxHeight:350,
			minHeight:70,
			selectHandler:null,
			itemFilter:null
		},
		/**
		 * 作用域
		 */
		_tap_event:"tap",
		/**
		 * 作用域
		 */
		_doc:null,
		
		/**
		 * input对象
		 */
		_input:null,
		
		/**
		 * 按钮对象
		 */
		_button:null,
		
		/**
		 * 数据展示容器
		 */
		_container:null,
		
		/**
		 * zIndex
		 */
		_zIndex:999,
		
		/**
		 * id
		 */
		_id:null,
		
		/**
		 * 本combox的config
		 */
		_config:null,

		/**
		 * 本combox内容的容器,数组方式,{key, text, xxxxxxx}
		 */
		_itemArray:null,

		_emptyWidth:null,

//		_testSpan:null,

//		_createButton:function(){
//			this._button = $("<span></span>").insertAfter(this._input).addClass("comboboxButton").on(this._tap_event, $.proxy(this._onInputTap, this)).hover(function(){
//				$(this).addClass("hover");
//			}, function(){
//				$(this).removeClass("hover");
//			});
//		},

		/**
		 * 计算下拉位置
		 */
		_getDropdownPosition:function(){
			var inputHeight = this._input.outerHeight();
			var inputOffset = this._input.offset();
			var inputWidth = this._input.outerWidth();
			var position = {
				"top":inputHeight + this._input[0].offsetTop + "px",
				"left":inputOffset.left + "px",
				"width":inputWidth - 2 + "px",
				"z-index":this._zIndex
			};
			return position;
		},

		/**
		 * 展示所有元素
		 */
		_showAllItem:function(){
			this._container.children().show();
			if(this._config.itemFilter){
				for(var i = 0; i < this._itemArray.length; i++){
					if(!this._config.itemFilter(this._itemArray[i])){
						this._itemArray[i].$element.hide();
					}
				}
			}
			this._showDropdown();
		},

		/**
		 * 展示container
		 */
		_showDropdown:function(){
			this._container.css(this._getDropdownPosition());
			this._container.height("auto");
			this._container.show();

			// 添加交错的样式
			var visibleCount = 0;
			for(var i = 0; i < this._itemArray.length; i++){
				if(this._itemArray[i].$element.is(":visible")){
					visibleCount++;
					if(visibleCount % 2 == 0){
						this._itemArray[i].$element.addClass("cross");
					}else{
						this._itemArray[i].$element.removeClass();
					}
					// 给选中的元素增加样式
					if(this._itemArray[i]._IS_SELECTED){
						this._itemArray[i].$element.addClass("selected");
					}else{
						this._itemArray[i].$element.removeClass("selected");
					}
				}
			}

			// 修正高度
			if(this._container.height() > this._config.maxHeight){
				this._container.height(this._config.maxHeight);
			}
			if(this._container.height() < this._config.minHeight){
				this._container.height(this._config.minHeight);
			}

		},

		/**
		 * 隐藏container
		 */
		_hideDropdown:function(){
			this._container.hide();
		},

		/**
		 * 去除所有选中的标记
		 */
		_clearSelected:function(){
			for(var i = 0; i < this._itemArray.length; i++){
				this._itemArray[i]._IS_SELECTED = false;
			}
		},

		_onInputKeyup:function(){
			this._clearSelected();
			this._hideDropdown();
			var value = this._input.val();
			for(var i = 0; i < this._itemArray.length; i++){
				if(this._itemArray[i].text.indexOf(value) < 0 || (this._config.itemFilter && !this._config.itemFilter(this._itemArray[i])) ){
					this._itemArray[i].$element.hide();
				}else{
					this._itemArray[i].$element.show();
				}
			}
			this._showDropdown();
		},

		_onInputBlur:function(){
			this._clearSelected();
			var item = this._getItemByText();
			if(item != null){
				// 标记选中的元素
				item._IS_SELECTED = true;
				if(this._config.selectHandler){
					this._config.selectHandler(item);
				}
			}
		},

		_onInputTap:function(){
			if(this._input.attr("disabled")){
				return false;
			}
			if(this._container.is(":visible")){
				this._hideDropdown();
			}else{
				this._showAllItem();
			}
		},

		//	_onItemSelect:function(item){
		//		this._input.val(item.value);
		//		if(this._config.selectHandler){
		//			this._config.selectHandler(item);
		//		}
		//	},

		_getItemByText:function(){
			var value = this._input.val();
			for(var i = 0; i < this._itemArray.length; i++){
				if(this._itemArray[i].text == value){
					return this._itemArray[i];
				}
			}
			return null;
		},

		/**
		 * 当鼠标点击时检查是否需要隐藏下拉区域
		 */
		_checkOnMouseDown:function(event){
			if(this._container.is(":visible")){
				var eventElement = event.target;
				// 如果不是本combox内的元素,隐藏
				if(!(eventElement === this._container[0] || eventElement === this._input[0] || jQuery.contains(this._container[0], eventElement))){
					// 点击发生在浮动区域和文本输入区域之外时隐藏下拉区域
					var item = this._getItemByText();
					if(item == null){
						this._input.val("");
					}
					this._hideDropdown();
				}
			}
		},

		/**
		 * @desc 增加数据
		 * @memberof Nuui.Combox
		 * @func addItem
		 * @instance
		 * @param {object} item - combox的item
		 */
		addItem:function(item){
			this._itemArray.push(item);
			var li = $("<li></li>");
			if(this._config.fontSize){
				li.css("font-size", this._config.fontSize);
			}
			li.html(item.text).on(this._tap_event, $.proxy(function(e){
				this._hideDropdown();
				this._input.val(item.text);
				this._input.trigger("blur");
				return false;
			}, this)).hover(function(){
				$(this).addClass("hover");
			}, function(){
				$(this).removeClass("hover");
			}).appendTo(this._container);
			item.$element = li;
		},

		/**
		 * @desc 为combox设置源数据
		 * @memberof Nuui.Combox
		 * @func setData
		 * @instance
		 * @param {array} itemArray - 存放item的array
		 */
		setData:function(itemArray){
			this._itemArray = [];
			this._container.empty();
			for(var i = 0; i < itemArray.length; i++){
				this.addItem(itemArray[i]);
			}
			if(!this._getItemByText()){
				this._input.val("");
			}
		},

		/**
		 * @desc 清除combox源数据
		 * @memberof Nuui.Combox
		 * @func clearData
		 * @instance
		 */
		clearData:function(){
			this.setData(new Array());
		},

		/**
		 * @desc 获取combox源数据
		 * @memberof Nuui.Combox
		 * @func getData
		 * @instance
		 * @returns {array} combox源数据数组
		 */
		getData:function(){
			return this._itemArray;
		},

		/**
		 * @desc 获取combox源数据大小
		 * @memberof Nuui.Combox
		 * @func getDataSize
		 * @instance
		 * @returns {int} combox源数据大小
		 */
		getDataSize:function(){
			return this._itemArray.length;
		},
		
		/**
		 * @desc 获取当前选中的文本对应的item的key
		 * @memberof Nuui.Combox
		 * @func getKey
		 * @instance
		 * @returns {string} item对应的key
		 */
		getKey:function(){
			var item = this._getItemByText();
			if(item == null){
				return null;
			}else{
				return item.key;
			}
		},
		
		/**
		 * @desc 获取当前选中的文本
		 * @memberof Nuui.Combox
		 * @func getText
		 * @instance
		 * @returns {string} 当前选中的文本
		 */
		getText:function(){
			var item = this._getItemByText();
			if(item == null){
				return null;
			}else{
				return item.text;
			}
		},
		
		/**
		 * @desc 按照传入的key给combox设置相应的文本
		 * @memberof Nuui.Combox
		 * @func setTextByKey
		 * @instance
		 * @param {string} key - item对应的key值
		 */
		setTextByKey:function(key){
			for(var i = 0; i < this._itemArray.length; i++){
				if(this._itemArray[i].key == key){
					this._input.val(this._itemArray[i].text);
				}
			}
		},

		/**
		 * @desc 设置selectHandler
		 * @memberof Nuui.Combox
		 * @func setSelectHandler
		 * @instance
		 * @param {func} selectHandler
		 */
		setSelectHandler:function(selectHandler){
			this._config.selectHandler = selectHandler;
		},
		
		/**
		 * @desc 设置itemFilter
		 * @memberof Nuui.Combox
		 * @func setItemFilter
		 * @instance
		 * @param {func} itemFilter
		 */
		setItemFilter:function(itemFilter){
			this._config.itemFilter = itemFilter;
		}
	};
});


